<template>
    <div class="page-container">
        <div class="page-header">
            <div class="page-header-bg"></div>
        </div>
        <div class="page-body">
            <div class="qrcode">
                <canvas :ref="QRCodeGen" />
            </div>
            <div class="body-info">
                <RouterLink to="/master/productList" custom v-slot="{ isActive, href, navigate }">
                    <button v-bind="$attrs" @click="navigate" class="link-btn">去查看</button>
                </RouterLink>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>

// 路由链接组件
import { RouterLink } from 'vue-router'
// 二维码插件
import QRCode from 'qrcode'

// 二维码生成
const QRCodeGen = (el: HTMLElement): undefined => {
    // https://www.npmjs.com/package/qrcode#example-1
    QRCode.toCanvas(el, window.location.href, {
        version: 5,
        width: 200,
        height: 200,
        quality: 0.3,
        margin: 1,
        color: {
            dark: "#67030e",
            light: "#FFFFFF"
        }
    }, function (error: any) {
        if (error) console.error(error)
    })
}
</script>

<style scoped lang="less">
.page-container {
    height: 100%;
    width: 100%;
    background-color: @bgcolor;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page-header {
    padding-top: 30px;
}

.page-header-bg {
    height: 100px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("@assets/img/master/index_title_content.png");
}

.page-body {
    flex: 1;
    width: 100%;
    padding-top: 35px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
    background-size: contain;
    background-image: url("@assets/img/master/title_bg.png");

    .qrcode {
        width: 180px;
        height: 180px;
        margin: 0 auto;
        border-radius: 5px;
        background-color: white;
        border: solid 8px pink;

        canvas {
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
        }
    }

    .body-info {
        display: flex;
        padding-top: 20px;
        justify-content: center;

        .link-btn {
            width: 120px;
            height: 35px;
            color: #eec19a;
            font-size: 15px;
            text-align: center;
            border-radius: 3px;
            border: #eec19a solid 1px;
            background-color: #961212;
        }
    }
}
</style>